<template>
	<view>
		<view class="goods-list">
			<view v-for="(item,index) in goodsList" :key="index" @click="gotoDetail(item)">
				<my-goods :goods="item"></my-goods>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//获取商品列表的查询对象
				queryObj: {
					query: "", //查询关键词
					cid: "", //分类ID
					pagenum: 1, //当前页码
					pagesize: 10 //页容量
				},
				//存储商品列表的数组
				goodsList: [],
				//数据总条数
				total: 0,
				//定义一个节流阀
				isLoading: false,

			};
		},
		onLoad(options) {
			//页面初始化的时候执行的操作  如果能从options里面拿到值，就用options里面的值，拿不到就赋值为 空字符串
			this.queryObj.query = options.query || ""
			this.queryObj.cid = options.cid || ""
			//页面一加载就发起请求
			this.initGoodsList()
		},
		//下拉刷新
		onPullDownRefresh() {
			//重置参数
			this.queryObj.pagenum = 1
			this.total = 0
			this.goodsList = []
			this.isLoading = false
			//调用初始化数据的方法
			this.initGoodsList(() => {
				uni.stopPullDownRefresh()
			})
		},
		//上拉触底事件设置
		onReachBottom() {
			//检查节流阀状态，如果为true, 就return出去，不要继续往下执行
			if (this.isLoading) return
			//判断数据是否加载完毕，加载完毕就不要往下走了，提示数据已经加载完毕
			if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg("数据已经加载完毕")
			//修改页码参数
			this.queryObj.pagenum += 1
			//重新调用获取商品列表的方法
			this.initGoodsList()
		},
		methods: {
			//获取商品列表的方法
			async initGoodsList(cb) {
				
				//发送异步请求之前，先将节流阀设置为true
				this.isLoading = true
				const {
					data
				} = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
				// console.log(data)
				//请求接受完毕，将节流阀重置为false
				this.isLoading = false
				cb && cb()
				//判断取回的数据的结果
				if (data.meta.status !== 200) return uni.$showMsg()
				//转存取回的数据
				this.goodsList = [...this.goodsList, ...data.message.goods]
				this.total = data.message.total
			},
			//跳转到选中商品的详情页
			gotoDetail(goods){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+goods.goods_id
				})
			}
		}
	}
</script>

<style lang="scss">
</style>
